<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>TenshoWang Studios | 创意无限</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind CSS -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#f5f2e9', // 米白色背景
            secondary: '#e0dacd', // 浅米色
            accent: '#ff6b81', // 粉色强调色
            dark: '#5d4037', // 深棕色文字
            light: '#ffffff', // 白色
            muted: '#a1887f', // 柔和色
          },
          fontFamily: {
            // 保留自定义字体
            blackletter: ['"Blackletter 686 BT"', 'Inter', 'system-ui', 'sans-serif'],
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'soft': '0 5px 15px rgba(0, 0, 0, 0.05)',
            'hover': '0 10px 25px rgba(0, 0, 0, 0.1)',
          },
          transitionTimingFunction: {
            'expo-out': 'cubic-bezier(0.16, 1, 0.3, 1)',
          }
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7);
      }
      .text-shadow-sm {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }
      .transition-custom {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .btn-hover {
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .btn-hover:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      }
      .bg-noise {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
      }
      .animate-float {
        animation: float 6s ease-in-out infinite;
      }
      @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0px); }
      }
      .clip-path-slant {
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
      }
      .modal-appear {
        animation: modalAppear 0.3s ease-out forwards;
      }
      @keyframes modalAppear {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
      }
      .modal-disappear {
        animation: modalDisappear 0.2s ease-in forwards;
      }
      @keyframes modalDisappear {
        from { opacity: 1; transform: scale(1); }
        to { opacity: 0; transform: scale(0.95); }
      }
      .backdrop-fade-in {
        animation: backdropFadeIn 0.3s ease-out forwards;
      }
      @keyframes backdropFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      .backdrop-fade-out {
        animation: backdropFadeOut 0.2s ease-in forwards;
      }
      @keyframes backdropFadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
      }
    }
  </style>
  
  <!-- 引入Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
  
  <!-- 引入TTF字体 -->
  <style>
    @font-face {
      font-family: "Blackletter 686 BT";
      src: url("686.woff2") format("truetype");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
  </style>
</head>
<body class="font-inter bg-primary min-h-screen flex flex-col items-center justify-center p-4 text-dark antialiased bg-noise">
  <!-- 页面内容包装器 -->
  <div class="max-w-3xl w-full text-center relative overflow-hidden">
    <!-- 个人信息 -->
    <div class="mb-16 relative z-10">
      <!-- 品牌标识 -->
      <h1 class="text-[clamp(3.5rem,10vw,7.5rem)] mb-6 tracking-tight text-shadow font-blackletter">
        TenshoWang  Studios
      </h1>
      
      <!-- 简介 -->
      <div class="max-w-2xl mx-auto mb-10">
        <p class="text-[clamp(1.2rem,3vw,1.8rem)] font-light italic leading-relaxed mb-2">
          "欲买桂花同载酒，终不似，少年游。"
        </p>
        <p class="text-[clamp(1rem,2vw,1.2rem)] mt-2 opacity-80">—— 【宋】刘过《唐多令》</p>
      </div>
      
      <!-- 功能按钮 -->
      <div class="flex flex-wrap justify-center gap-4 mb-12">
        <a href="Assets.html" class="no-underline"> 
          <button class="px-6 py-3 bg-dark text-white rounded-full font-semibold btn-hover transition-custom flex items-center">
            <i class="fa fa-user mr-2"></i>敬请期待
          </button>
        </a>
        <a href="Assets.html" class="no-underline"> 
          <button class="px-6 py-3 bg-white/50 backdrop-blur-sm text-dark rounded-full font-semibold btn-hover transition-custom border border-dark/20 flex items-center">
            <i class="fa fa-briefcase mr-2"></i>资源下载	 
          </button>
        </a>
        <a href="Assets.html" class="no-underline">		  
          <button class="px-6 py-3 bg-white/50 backdrop-blur-sm text-dark rounded-full font-semibold btn-hover transition-custom border border-dark/20 flex items-center">
            <i class="fa fa-file-text-o mr-2"></i>敬请期待
          </button>
        </a>
        <a href="Assets.html" class="no-underline">		  
          <button class="px-6 py-3 bg-white/50 backdrop-blur-sm text-dark rounded-full font-semibold btn-hover transition-custom border border-dark/20 flex items-center">
            <i class="fa fa-envelope mr-2"></i>敬请期待
          </button>
        </a>
      </div>
      
      <!-- 装饰分隔线 -->
      <div class="w-32 h-1 bg-dark/10 mx-auto mb-12 rounded-full"></div>
      
      <!-- 社交媒体链接 -->
      <div class="flex justify-center space-x-4 mb-8">
        <a href="https://www.douyin.com/user/MS4wLjABAAAAut2gZm9KSKet2TfMYTCANqBfwAecCuQjF57egv0dlrg?from_tab_name=main" class="w-12 h-12 rounded-full bg-white/50 backdrop-blur-sm flex items-center justify-center text-dark hover:bg-white/70 transition-custom border border-dark/20 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" t="1749727764642" class="icon transition-colors" viewBox="0 0 1024 1024" version="1.1" p-id="4413" width="20" height="20"><path fill="#5d4037" d="M937 424c-84 0 -166 -27 -233 -78v352c0 180 -139 326 -310 326S85 878 85 698c0 -180 139 -326 310 -326 17 0 34 2 50 4v187c-16 -6 -32 -9 -49 -9 -76 0 -138 65 -138 145 0 80 62 145 138 145 76 0 138 -65 138 -145V0H707c0 135 104 244 232 244v180l-1 0" p-id="4414"/>
          </svg>
        </a>
        <a href="https://www.kuaishou.com/profile/3xx9k42hgkf2d9s" class="w-12 h-12 rounded-full bg-white/50 backdrop-blur-sm flex items-center justify-center text-dark hover:bg-white/70 transition-custom border border-dark/20 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" t="1749726969109" class="icon transition-colors" viewBox="0 0 1024 1024" version="1.1" p-id="3378" width="20" height="20"><path fill="#5d4037" d="M487 -21" p-id="3379"/><path fill="#5d4037" d="M718 671c-22 8 -36 17 -35 28l-1 114s0 31 36 25l64 -15v-31l-59 10 -2 -89s46 -11 159 -32l14 -3 1 163s-6 37 -45 50l-230 53s-63 12 -146 -23l61 -85 3 -4 2 -8v-3l0 -75v-8l-3 -5 -3 -5 -5 -5 -118 -118 -1 -1 -1 -1 -1 -1v-2l0 -8 3 -8s12 -19 32 -23l5 -1 2 0c64 -4 418 -55 443 18l1 62z" p-id="3380"/><path fill="#5d4037" d="M360 611a52 52 0 0 0 -22 -9L151 578c-26 -3 -53 10 -53 37L95 880c0 28 21 59 47 67l195 56a96 96 0 0 0 33 -7l135 -171 1 -68zm-23 284c0 17 -13 27 -29 24l-121 -26c-16 -3 -29 -20 -29 -36v-181c0 -17 13 -27 29 -24l121 26c16 3 29 20 29 36z" p-id="3381"/><path fill="#5d4037" d="M759 143c-54 0 -102 27 -133 68 -27 -106 -118 -184 -225 -184 -129 0 -233 113 -233 252 0 119 77 219 180 245l411 -18c94 0 170 -81 170 -182s-76 -182 -170 -182zM438 415c-63 0 -114 -60 -114 -133s51 -133 114 -133 114 60 114 133 -51 133 -114 133zm347 -3c-42 0 -77 -40 -77 -89s34 -89 77 -89 77 40 77 89 -34 89 -77 89z" p-id="3382"/>
          </svg>
        </a>
        <a href="#"  id="resumeBtn" class="w-12 h-12 rounded-full bg-white/50 backdrop-blur-sm flex items-center justify-center text-dark hover:bg-white/70 transition-custom border border-dark/20 hover:scale-110">
          <i class="fa fa-weixin transition-colors"></i>
        </a>
        <a href="https://qm.qq.com/q/OZSIuSdTEY" class="w-12 h-12 rounded-full bg-white/50 backdrop-blur-sm flex items-center justify-center text-dark hover:bg-white/70 transition-custom border border-dark/20 hover:scale-110">
          <i class="fa fa-qq transition-colors"></i>
        </a>
        <a href="https://space.bilibili.com/176562900" class="w-12 h-12 rounded-full bg-white/50 backdrop-blur-sm flex items-center justify-center text-dark hover:bg-white/70 transition-custom border border-dark/20 hover:scale-110">
          <svg xmlns="http://www.w3.org/2000/svg" t="1749728121338" class="icon transition-colors" viewBox="0 0 2299 1024" version="1.1" p-id="5424" width="200" height="200"><path fill="#5d4037" d="M885 524s64 -13 73 -5l31 233 -52 7zm25 -128h37l10 90h-34L910 396zm-42 9l34 -3 10 88 -30 5 -15 -90zm89 -110s75 -8 77 0l37 439h-57zm131 231h72v237H1107l-20 -237zm36 -120h36v89h-36zm-44 0h31v89h-31zM647 585l-20 -359c-12 10 -99 39 -99 39 30 103 71 533 71 533 206 7 291 -84 297 -105a77 77 0 0 0 0 -38c-50 -82 -248 -71 -248 -71zm62 156L696 638l95 40zm841 -85c-50 -82 -248 -71 -248 -71l-20 -359c-12 10 -99 39 -99 39 30 103 71 533 71 533 206 7 291 -84 297 -105a77 77 0 0 0 0 -38zM1364 741l-13 -102 95 40zm176 -217s64 -13 73 -5l31 233 -52 7zm25 -128h37l10 90h-34l-13 -90zm-42 9l34 -3 10 88 -30 5 -15 -90zm89 -110s75 -8 77 0l37 439h-57zm131 231h72v237h-52l-20 -237zm36 -120h36v89h-36zm-44 0h31v89h-31z" p-id="5425"/></svg>
        </a>
        <a href="https://www.youtube.com/@TenshoWang" class="w-12 h-12 rounded-full bg-white/50 backdrop-blur-sm flex items-center justify-center text-dark hover:bg-white/70 transition-custom border border-dark/20 hover:scale-110">
          <i class="fa fa-youtube-square transition-colors"></i>
        </a>
        <a href="https://www.instagram.com/tenshowang/" class="w-12 h-12 rounded-full bg-white/50 backdrop-blur-sm flex items-center justify-center text-dark hover:bg-white/70 transition-custom border border-dark/21 hover:scale-110">
          <i class="fa fa-instagram transition-colors"></i>
        </a>
      </div>
      
      <!-- 页脚信息 - 增加了底部边距 -->
      <div class="mt-35 text-sm text-muted">
        <p>© 2025 Designed by TenshoWang Studios. </p>
      </div>
    </div>
  </div>
  
  <!-- 简历图片模态框 -->
  <div id="resumeModal" class="fixed inset-0 flex items-center justify-center z-50 opacity-0 pointer-events-none">
    <!-- 背景遮罩 -->
    <div id="modalBackdrop" class="absolute inset-0 bg-dark/70 opacity-0"></div>
    
    <!-- 模态框内容 -->
    <div id="modalContent" class="relative z-10 bg-white rounded-lg shadow-xl overflow-hidden max-w-3xl w-full max-h-[90vh] flex flex-col opacity-0 scale-95">
      <!-- 模态框头部 -->
      <div class="flex justify-between items-center p-4 bg-dark text-white">
        <h3 class="text-lg font-semibold">扫描二维码查找WeChat</h3>
        <button id="closeModal" class="text-white hover:text-accent transition-colors">
          <i class="fa fa-times text-xl"></i>
        </button>
      </div>
      
      <!-- 模态框主体 - 图片容器 -->
      <div class="flex-grow overflow-auto p-4">
        <div class="flex justify-center items-center">
          <!-- 示例图片 - 实际使用时替换为您的简历图片 -->
          <img 
            src="https://img.picui.cn/free/2025/06/12/684ad5fb0bce1.png" width="400" height="500"
            alt="微信二维码" 
            class="max-w-full h-auto rounded-md shadow-md"
          >
        </div>
      </div>
      
      <!-- 模态框底部 -->
      <div class="p-4 bg-secondary/30 flex justify-center">
        <button id="closeBtn" class="px-6 py-2 bg-dark text-white rounded-full font-semibold btn-hover transition-custom">
          关闭
        </button>
      </div>
    </div>
  </div>
  
  <!-- JavaScript -->
  <script>
    // 按钮点击效果增强
    document.querySelectorAll('button').forEach(btn => {
      btn.addEventListener('click', function() {
        this.classList.add('scale-95');
        setTimeout(() => {
          this.classList.remove('scale-95');
        }, 150);
      });
    });
    
    // 添加页面加载动画
    document.addEventListener('DOMContentLoaded', () => {
      const mainContent = document.querySelector('.max-w-3xl');
      mainContent.classList.add('opacity-0');
      mainContent.style.transition = 'opacity 0.8s ease-out';
      
      setTimeout(() => {
        mainContent.classList.remove('opacity-0');
      }, 300);
    });
    
    // 简历模态框逻辑
    const resumeBtn = document.getElementById('resumeBtn');
    const resumeModal = document.getElementById('resumeModal');
    const modalContent = document.getElementById('modalContent');
    const modalBackdrop = document.getElementById('modalBackdrop');
    const closeModal = document.getElementById('closeModal');
    const closeBtn = document.getElementById('closeBtn');
    
    // 打开模态框
    resumeBtn.addEventListener('click', () => {
      // 防止背景滚动
      document.body.style.overflow = 'hidden';
      
      // 显示模态框和背景
      resumeModal.classList.remove('opacity-0', 'pointer-events-none');
      modalBackdrop.classList.add('backdrop-fade-in');
      modalContent.classList.add('modal-appear');
      
      // 防止模态框内容的点击事件冒泡到背景
      modalContent.addEventListener('click', (e) => {
        e.stopPropagation();
      });
    });
    
    // 关闭模态框的函数
    function hideModal() {
      // 恢复背景滚动
      document.body.style.overflow = '';
      
      // 添加关闭动画
      modalContent.classList.remove('modal-appear');
      modalContent.classList.add('modal-disappear');
      modalBackdrop.classList.remove('backdrop-fade-in');
      modalBackdrop.classList.add('backdrop-fade-out');
      
      // 动画结束后隐藏模态框
      setTimeout(() => {
        resumeModal.classList.add('opacity-0', 'pointer-events-none');
        modalContent.classList.remove('modal-disappear');
        modalBackdrop.classList.remove('backdrop-fade-out');
      }, 200);
    }
    
    // 关闭按钮事件
    closeModal.addEventListener('click', hideModal);
    closeBtn.addEventListener('click', hideModal);
    
    // 点击背景关闭模态框
    modalBackdrop.addEventListener('click', hideModal);
    
    // 按ESC键关闭模态框
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && !resumeModal.classList.contains('opacity-0')) {
        hideModal();
      }
    });
  </script>
</body>
</html>
